<template>
  <div class="file-explorer-container">
    <div class="file-explorer">
      <!-- 侧边菜单 -->
      <div class="side-menu">
        <div class="side-menu-section">
          <h3>存储位置</h3>
          <ul class="menu-items">
            <li :class="{'menu-item-active' : currentMenu == MenuItemType.PERSONAL_FILE_LIST}"
                class="menu-item"
                @click="goToPersonalFilesView">
              <img alt="我的空间" class="menu-icon"
                   src="@/asserts/personalFile.svg">
              <span>我的空间</span>
            </li>
            <li :class="{'menu-item-active' : currentMenu == MenuItemType.PUBLIC_FILE_LIST}"
                class="menu-item"
                @click="goToPublicFilesView">
              <img alt="公共空间" class="menu-icon"
                   src="@/asserts/people.svg">
              <span>公共空间</span>
            </li>
          </ul>
        </div>

        <div class="side-menu-section">
          <h3>快速访问</h3>
          <ul class="menu-items">
            <li :class="{'menu-item-active' : currentMenu == MenuItemType.STAR_FILE_LIST}"
                class="menu-item"
                @click="showFavorites">
              <img alt="我的收藏"
                   class="menu-icon"
                   onerror="this.src='@/asserts/documentTypeSvg/home.svg'"
                   src="@/asserts/documentTypeSvg/star.svg">
              <span>我的收藏</span>
            </li>
            <li :class="{'menu-item-active' : currentMenu == MenuItemType.RECYCLE_FILE_LIST}"
                class="menu-item"
                @click="showRecycleBin">
              <img alt="回收站" class="menu-icon"
                   src="@/asserts/recycleBin2.svg">
              <span>回收站</span>
            </li>
            <li :class="{'menu-item-active' : currentMenu == MenuItemType.RECENT_OPEN_FILE_LIST}"
                class="menu-item"
                @click="showRecentFiles"
            >
              <img alt="最近打开" class="menu-icon"
                   src="@/asserts/documentTypeSvg/clock.svg">
              <span>最近打开</span>
            </li>
          </ul>
        </div>

      </div>

      <!-- 主内容区域 -->
      <div class="file-list-section">
        <!--  文件夹列表操作按钮-->
        <div class="toolbar">
          <!-- 第一行：路径显示 -->
          <div class="toolbar-row">
            <div class="navigation">
              <button class="home-button" @click="updateRootDirectoryFileList">
                <img alt="Home" class="home-icon" src="@/asserts/documentTypeSvg/home.svg">
              </button>
              <span class="current-path">当前路径: {{
                  currentPath !== '' ? currentPath : '根目录'
                }}</span>
            </div>
          </div>
          <!-- 第二行：操作按钮和搜索框 -->
          <div class="toolbar-row">
            <div class="search-container">
              <div class="search-input-wrapper">
                <input
                    v-model="searchKeyword"
                    class="search-input"
                    placeholder="输入文件名或文件夹名"
                    type="text"
                >
                <button v-if="searchKeyword" class="clear-search-button" @click="clearSearch">×</button>
              </div>
            </div>
          </div>
        </div>
        <!--  我的空间，文件列表容器-->
        <div v-if="currentMenu == MenuItemType.PERSONAL_FILE_LIST">
          <PersonalFileList/>
        </div>

        <!--  公共空间，文件列表容器-->
        <div v-if="currentMenu == MenuItemType.PUBLIC_FILE_LIST">
          <PublicFileList/>
        </div>

        <!--   收藏文件列表-->
        <div v-if="currentMenu == MenuItemType.STAR_FILE_LIST">
          <StarList/>
        </div>
        <!--   回收站文件列表-->
        <div v-if="currentMenu == MenuItemType.RECYCLE_FILE_LIST">
          <RecycleList/>
        </div>

        <!--   最近打开文件列表-->
        <div v-if="currentMenu == MenuItemType.RECENT_OPEN_FILE_LIST">
          <RecentOpenList/>
        </div>
      </div>

      <!-- 右侧操作面板 -->
      <div v-if="currentMenu == MenuItemType.PERSONAL_FILE_LIST || currentMenu == MenuItemType.PUBLIC_FILE_LIST "
           class="action-panel">
        <h3>操作</h3>
        <div class="action-buttons">
          <!-- 默认文件夹操作 -->
          <div class="base-action-button">
            <button
                class="action-button"
                @click="showCreateFolderDialog"
            >
              <span class="icon">
                <img alt="新建文件夹" class="icon-img" src="@/asserts/newFolder.svg">
              </span> 新建文件夹
            </button>
            <button
                class="action-button"
                @click="showCreateFileDialog"
            >
              <span class="icon">
                <img alt="新建文件" class="icon-img" src="@/asserts/newFile.svg">
              </span> 新建文件
            </button>
            <button
                class="action-button  upload-file-btn"
                @click="showUploadFileDialog"
            >
              <span class="icon">
                <img alt="上传文件" class="icon-img" src="@/asserts/uploadFile.svg">
              </span> 上传文件
            </button>
            <button
                class="action-button"
                @click="updateCurrentPathFileList"
            >
              <span class="icon">
                <img alt="刷新" class="icon-img" src="@/asserts/Fresh.svg">
              </span> 刷新
            </button>
          </div>

          <div v-if="sortedItems.length > 0 && selectedItem" class="selected-item-actions">
            <!-- 选中项目的操作 -->
            <button
                v-if="selectedItem.folderFlag"
                class="action-button"
                @click="enterFolder(selectedItem)"
            >
              <span class="icon">
                <img alt="进入文件夹" class="icon-img" src="@/asserts/documentTypeSvg/folder.svg">
              </span> 进入文件夹
            </button>
            <button v-if="selectedItem" class="action-button" @click="showRenameItemDialog">
              <span class="icon">
                <img alt="重命名" class="icon-img" src="@/asserts/rename.svg">
              </span> 重命名
            </button>
            <button v-if="selectedItem" class="action-button danger" @click="showDeleteItemDialog">
              <span class="icon">
                <img alt="删除" class="icon-img" src="@/asserts/delete.svg">
              </span> 删除
            </button>
            <button
                v-if="!selectedItem.folderFlag"
                class="action-button"
                @click="previewCurrentFileItem()"
            >
              <span class="icon">
                <img alt="预览" class="icon-img" src="@/asserts/preview.svg">
              </span> 预览
            </button>
            <button
                v-if="!selectedItem.folderFlag"
                class="action-button"
                @click="starItem"
            >
              <span class="icon">
                <img alt="收藏" class="icon-img" src="@/asserts/documentTypeSvg/star.svg">
              </span> 收藏
            </button>
            <button
                v-if="!selectedItem.folderFlag"
                class="action-button"
                @click="downloadItem"
            >
              <span class="icon">
                <img alt="下载" class="icon-img" src="@/asserts/download.svg">
              </span> 下载
            </button>
          </div>

          <div v-if="!selectedItem" class="no-selection-message">
            请选择一个文件或文件夹以查看更多操作
          </div>
        </div>
      </div>
    </div>

    <!--  新建文件夹对话框部分 -->
    <div v-if="showFolderDialog" class="modal">
      <div class="modal-content">
        <h3>新建文件夹</h3>
        <input
            v-model="newFolderName"
            placeholder="输入文件夹名称"
            type="text"
            @keyup.enter="confirmCreateFolder"
        >
        <div class="modal-actions">
          <button @click="cancelCreateFolder">取消</button>
          <button @click="confirmCreateFolder">确定</button>
        </div>
      </div>
    </div>

    <!--    新建文件对话框-->

    <NewFileDialog
        v-model:dialog-visible="showCreateFileDialogFlag"
        @createFile="confirmCreateFile"
    />

    <!-- 上传文件对话框 -->
    <upload-file-dialog
        v-model:dialog-visible="showUploadDialogFlag"
        @uploadFile="updateCurrentPathFileList"
    ></upload-file-dialog>


    <!--    重命名确认对话框-->
    <div v-if="showRenameDialog" class="modal">
      <div class="modal-content">
        <h3>重命名</h3>
        <input
            v-model="newItemName"
            :placeholder="selectedItem?.name"
            type="text"
            @keyup.enter="confirmRename"
        >
        <div class="modal-actions">
          <button @click="cancelRename">取消</button>
          <button @click="confirmRename">确定</button>
        </div>
      </div>
    </div>

    <!--    删除确认对话框-->
    <div v-if="showDeleteDialog" class="modal">
      <div class="modal-content">
        <h3>确认删除</h3>
        <p>确定要删除 "{{ selectedItem?.name }}" 吗？</p>
        <div class="modal-actions">
          <button @click="cancelDelete">取消</button>
          <button class="danger" @click="confirmDelete">删除</button>
        </div>
      </div>
    </div>


  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {ElMessage} from "element-plus";
import {message} from "@/utils/ElmessasgeUtils";
import {
  currentBucketName,
  currentMenu,
  currentPath,
  MenuItemType,
  previewCurrentFileItem, searchKeyword, selectedItem, sortedItems, updateBucketName,
  updateCurrentPathFileList, updateRootDirectoryFileList, updateSpecifyFolderDirectoryFileList
} from "@/views/documentManager/components/ts/FileBrowser";

import NewFileDialog from "@/views/documentManager/components/Dialog/newFileDialog.vue";
import UploadFileDialog from "@/views/documentManager/components/Dialog/uploadFileDialog2.vue";
import PersonalFileList from "@/views/documentManager/components/PersonalFileList.vue";
import {saveOrUpdate_userFavorites} from "@/api/documentManage/userfavorite";
import StarList from "@/views/documentManager/components/StarList.vue";
import RecycleList from "@/views/documentManager/components/RecycleList.vue";
import RecentOpenList from "@/views/documentManager/components/RecentOpenList.vue";
import PublicFileList from "@/views/documentManager/components/PublicFileList.vue";
import {
  deleteFileOrFolder, downloadBucketFile, newFileInBucket,
  newFolderInBucket,
  renameBucketFile,
  renameBucketFolder
} from "@/api/documentManage/minioManager2";
import type {FileItem} from "@/type/documentManager/FileItem";


// 对话框状态
const showFolderDialog = ref(false);
const showCreateFileDialogFlag = ref(false);
const showRenameDialog = ref(false);
const showDeleteDialog = ref(false);
const showUploadDialogFlag = ref(false);
const newFolderName = ref('');
const newItemName = ref('');

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = '';
};


/**
 *  ----------------------- 左侧操作栏    -------------------------------
 */


// 侧边菜单功能 - 我的空间
const goToPersonalFilesView = async () => {
  await updateBucketName(true)
  selectedItem.value = null
  currentMenu.value = MenuItemType.PERSONAL_FILE_LIST;

};

// 侧边菜单功能 - 公共空间
const goToPublicFilesView = async () => {
  await updateBucketName(false)
  selectedItem.value = null
  currentMenu.value = MenuItemType.PUBLIC_FILE_LIST;

};

// 侧边菜单功能 - 我的收藏
const showFavorites = () => {
  selectedItem.value = null
  currentMenu.value = MenuItemType.STAR_FILE_LIST;
};

// 侧边菜单功能 - 回收站
const showRecycleBin = () => {
  selectedItem.value = null
  currentMenu.value = MenuItemType.RECYCLE_FILE_LIST;
  message("功能未完成，仅展示", 'warning')
};

// 侧边菜单功能 - 最近打开
const showRecentFiles = () => {
  selectedItem.value = null
  currentMenu.value = MenuItemType.RECENT_OPEN_FILE_LIST;
  message("功能未完成，仅展示", 'warning')
};


/**
 *   -------------------- 右侧功能按钮 -------------
 */

// 点击 新建文件夹 按钮
function showCreateFolderDialog() {
  newFolderName.value = '';
  showFolderDialog.value = true;
}


// 点击 新建文件 按钮
function showCreateFileDialog() {
  showCreateFileDialogFlag.value = true;
}

// 侧边菜单功能 - 点击上传文件
function showUploadFileDialog() {
  showUploadDialogFlag.value = true;
}

// 点击 进入文件夹按钮
async function enterFolder(item: FileItem) {
  if (!item.folderFlag) return;

  await updateSpecifyFolderDirectoryFileList(item.path);
}

// 点击 下载按钮
function downloadItem() {
  if (!selectedItem.value || selectedItem.value.folderFlag) return;

  downloadBucketFile(currentBucketName.value, selectedItem.value.path).then(res => {
    console.log(res)
  })


}

// 点击 重命名按钮
function showRenameItemDialog() {
  if (!selectedItem.value) return;

  newItemName.value = selectedItem.value.name;
  showRenameDialog.value = true;
}

// 点击 删除按钮
function showDeleteItemDialog() {
  if (!selectedItem.value) return;
  showDeleteDialog.value = true;
}


// 点击 收藏按钮
function starItem() {
  if (!selectedItem.value || selectedItem.value.folderFlag) return;

  console.log("收藏", selectedItem.value.path)
  saveOrUpdate_userFavorites({
    path: currentPath.value,
    fullPath: selectedItem.value.path,
    bucket: currentBucketName.value,
    name: selectedItem.value.name,
  }).then((res: any) => {
    if (res.data.code == 200) {
      message("收藏成功")
    } else {
      message("收藏失败: " + res.data.msg, 'error');
    }
  })

}

/**
 *  -------------- 重命名文件 或 文件夹 --------------
 */

// 取消删除 文件 或 文件夹
const cancelDelete = () => {
  showDeleteDialog.value = false;
};

// 确认删除文件 或 文件夹
const confirmDelete = async () => {
  if (!selectedItem.value) return;
  try {
    let response: any = await deleteFileOrFolder(currentBucketName.value, selectedItem.value.path, selectedItem.value.folderFlag ? 1 : 0)
    if (response.data.code === 200) {
      await updateCurrentPathFileList()
      showDeleteDialog.value = false;
      selectedItem.value = null;
      message("删除成功")
    } else {
      message('删除失败: ' + response.data.msg, 'error')
    }

  } catch (err) {
    console.error('删除失败:', err);
    ElMessage.error('删除文件失败')
  }
};

// 取消重命名
const cancelRename = () => {
  showRenameDialog.value = false;
};

// 确认重命名
const confirmRename = async () => {
  if (!selectedItem.value || !newItemName.value.trim()) return;

  try {
    let response = null;

    // 重命名文件夹
    if (selectedItem.value.folderFlag) {
      response = await renameBucketFolder(currentBucketName.value, `${currentPath.value}${selectedItem.value.name}`, `${currentPath.value}${newItemName.value}`)
    }
    // 重命名文件
    else {
      response = await renameBucketFile(currentBucketName.value, `${currentPath.value}${selectedItem.value.name}`, `${currentPath.value}${newItemName.value}`)
    }


    if (response.data.code === 200) {
      message("重命名成功: " + `${selectedItem.value.path} -> ${newItemName.value}`, 'success')
    } else {
      console.log(response.data)
      message("重命名失败", 'error')
    }

    //  直接重新加载文件列表，发现并不会更新列表，需要延迟
    setTimeout(async () => {
      await updateCurrentPathFileList()
    }, 100)

    showRenameDialog.value = false;
    selectedItem.value = null;

  } catch (err) {
    message('重命名失败:' + err, 'error');
  }
};

// 取消新建文件夹
const cancelCreateFolder = () => {
  showFolderDialog.value = false;
};

// 确认新建文件夹
const confirmCreateFolder = async () => {
  if (!newFolderName.value.trim()) {
    alert('文件夹名称不能为空');
    return;
  }
  try {
    let response = await newFolderInBucket(currentBucketName.value, `${currentPath.value}/${newFolderName.value}`);
    if (response.data.code === 200) {
      message("创建文件夹成功", 'success')
      await updateCurrentPathFileList()
      showFolderDialog.value = false;
      selectedItem.value = null;
    } else {
      message("创建文件夹失败", 'error')
    }

  } catch (err) {
    alert('创建文件夹失败');
  }
};

// 确认新建文件
async function confirmCreateFile(fileName: string) {
  try {

    let response;
    response = await newFileInBucket(currentBucketName.value, `${currentPath.value}/${fileName}`);
    if (response.data.code === 200) {
      message("创建文件成功", 'success')
      await updateCurrentPathFileList()
      showCreateFileDialogFlag.value = false;
      selectedItem.value = null;
    } else {
      message("创建文件失败: " + response.data.msg, 'error')
    }


  } catch (err) {
    console.error('创建文件失败:', err);
    alert('创建文件失败');
  }
}


</script>

<style lang="scss" scoped>
/* 整体三栏布局 */
.file-explorer {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 20px;
}

/* 侧边菜单样式 */
.side-menu {
  width: 200px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 20px;
  border: 1px solid #e0e0e0;
}

.side-menu-section {
  margin-bottom: 20px;
}

.side-menu-section h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
  font-weight: 600;
  padding: 0 10px;
}

.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 未选中状态（默认状态） */
.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: white;
  border: 1px solid transparent;

  &:hover {
    background-color: #e9f8fb;
    border-color: #4caf50;
    color: #4caf50;
    transform: translateX(2px);
  }
}

/* 选中状态 */
.menu-item-active {
  background-color: #e3f2fd;
  border-color: #bbdefb;
  transform: translateX(2px);
}

.menu-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 文件列表区域 - 占据中间所有空间 */
.file-list-section {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 右侧操作面板样式 */
.action-panel {
  width: 220px;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 20px;
  margin-top: 0 !important; /* 覆盖可能的margin */
}

/* 调整主内容区域布局 */
.file-explorer {
  display: flex;
  flex-wrap: wrap;
}

/* 原有样式保持不变 */
.file-explorer-container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header-name {
  flex: 1;
  min-width: 0; /* 防止flex item溢出 */
}

.action-panel {
  width: 200px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 20px;
  border: 1px solid #e0e0e0;

}

.action-panel h3 {
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  margin-bottom: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: white;
  border: 1px solid transparent;
  width: 100%;
  text-align: left;

  &:hover {
    border-color: #4CAF50;
    color: #4CAF50;
    background-color: #e9f8fb;
    transform: translateY(-1px);
  }

}

.selected-item-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}

.no-selection-message {
  margin-top: 12px;
  padding: 10px;
  text-align: center;
  color: #666;
  font-size: 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  transition: all 0.2s;
}

.action-button .icon {
  font-size: 16px;
  margin-right: 8px;
}

.action-button.danger {
  color: #f44336;
  border-color: #f44336;
}

.action-button.danger:hover {
  background-color: #ffebee;
}

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding: 8px 12px 8px 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 250px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-position: 8px center;
  background-repeat: no-repeat;
}

/* 搜索框 高亮*/
.search-input:focus {
  outline: none;
  border-color: #4CAF50;
  width: 250px;
}

.clear-search-button {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}

.clear-search-button:hover {
  color: #333;
}

.left-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar-fresh-button {
  padding: 8px 16px;
  background-color: #13ce66;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.toolbar-fresh-button:hover {
  background-color: #45a049;
}

.navigation {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  min-width: 0;
}

.home-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-right: 8px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.home-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.home-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.back-button {
  margin-right: 16px;
  padding: 6px 12px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #d0d0d0;
}

.back-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.current-path {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.modal-content {
  background-color: white;
  padding: 24px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
}

.modal-content input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.modal-content input:focus {
  outline: none;
  border-color: #4CAF50;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal-actions button:not(.danger) {
  background-color: #f0f0f0;
}

.modal-actions button:not(.danger):hover {
  background-color: #e0e0e0;
}

.modal-actions button.danger {
  background-color: #f44336;
  color: white;
}

.modal-actions button.danger:hover {
  background-color: #d32f2f;
}

.preview-modal .modal-content {
  max-width: 90%;
  max-height: 90vh;
  width: 800px;
  display: flex;
  flex-direction: column;
}

.file-name-input label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.file-name-input input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 右侧按钮图标样式 */
.icon-img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .file-explorer {
    flex-direction: column;
    gap: 15px;
  }

  .side-menu {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    position: static;
  }

  .side-menu-section {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
  }

  .file-list-section {
    width: 100%;
  }

  .action-panel {
    width: 100%;
    position: static;
    margin-top: 16px !important;
  }

  .file-list {
    max-width: 100%;
  }

  .action-panel {
    width: 100%;
    position: static;
    margin-top: 16px;
  }

  .toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .left-actions {
    width: 100%;
    justify-content: space-between;
  }

  .navigation {
    width: 100%;
  }

  .preview-modal .modal-content {
    width: 95%;
    height: 95vh;
  }

}

/* 上传文件Btn */
.upload-file-btn {
  background: #e3efe3;
}

.file-icon {
  fill: #607D8B; /* 蓝色灰色 */
}

.folder-icon {
  fill: #FFA000; /* 文件夹图标颜色 - 橙色 */
}

/* 调整列表项对齐 */
.file-list li {
  display: flex;
  align-items: center;
}

/* 调整名称部分 */
.name {
  flex: 1;
  min-width: 0; /* 防止flex item溢出 */
}


</style>